<template>
    <div class="box">
        <div class="header_box">
            <HeaderView>
                <template v-slot:center>
                   <div class="header_box_main">
                    创建团购
                   </div>  
                </template>
            </HeaderView>
        </div>

        <div class="card item1">
            <p> 
                抽成比例:3% 每单
            </p>
            <span class="sp1">
                团购订单按此比例抽成
            </span>
        </div>

        <div class="card item2">
           <van-form @submit="onSubmit">
                <van-field
                    v-model="goodImg"
                    name="商品图片"
                    label="商品图片*"
                    placeholder="商品图片>>"
                    :rules="[{ required: true, message: '请填写商品图片' }]"
                    @click="toAddGoodImg"
                />
                <van-field
                    v-model="chineseName"
                    name="中文名称"
                    label="中文名称*"
                    placeholder="如烤肉双人套餐"
                    :rules="[{ required: true, message: '请填写中文名称' }]"
                />
                <van-field
                    v-model="englishName"
                    name="英文名称"
                    label="英文名称*"
                    placeholder="Such as BBQ package for two"
                    :rules="[{ required: true, message: '请填写英文名称' }]"
                />
            </van-form>
        </div>

        <div class="card item3">
           <van-form @submit="onSubmit">
                <van-field
                    v-model="goodImg"
                    name="团购价格"
                    label="团购价格*"
                    placeholder="团购价格"
                    :rules="[{ required: true, message: '请填写团购价格' }]"
                />
                <van-field
                    v-model="chineseName"
                    name="团购套餐"
                    label="团购套餐*"
                    placeholder="添加套餐>>"
                    :rules="[{ required: true, message: '请填写团购套餐' }]"
                    @click="toAddGoodsName"
                />
            </van-form>
        </div>

        <div class="card item4">
            <van-form @submit="onSubmit">
                <van-field
                    v-model="validityTime"
                    name="有效期"
                    label="有效期*"
                    placeholder="请输入购买后有效期"
                    :rules="[{ required: true, message: '请填写有效期' }]"
                />
                <van-field
                    v-model="startToEndDate"
                    name="活动日期"
                    label="活动日期*"
                    placeholder="请选择起止日期>>"
                    :rules="[{ required: true, message: '请填写活动日期' }]"
                    @click="tostartToEndDate"
                />
                <van-field
                    v-model="unUseDate"
                    name="不可用日期"
                    label="不可用日期*"
                    placeholder="请添加日期>>"
                    :rules="[{ required: true, message: '请填写不可用日期' }]"
                    @click="toUnUseDate"
                />
                <van-field
                    v-model="useTime"
                    name="可用时间"
                    label="可用时间*"
                    placeholder="请选择使用时间>>"
                    :rules="[{ required: true, message: '请填写可用时间' }]"
                    @click="toUseDate"
                />
                <van-field
                    v-model="useTime"
                    name="限购数量"
                    label="限购数量"
                    placeholder="1-99"
                    :rules="[{ required: true, message: '请填写限购数量' }]"
                />
                <van-field
                    v-model="useTime"
                    name="库存数量"
                    label="库存数量*"
                    placeholder="1-9999"
                    :rules="[{ required: true, message: '请填写库存数量' }]"
                />
                <van-field
                    v-model="useTime"
                    name="使用规则"
                    label="使用规则*"
                    placeholder="请添加规则>>"
                    :rules="[{ required: true, message: '请填写使用规则' }]"
                    @click="toUseRules"
                />

            </van-form>
        </div>

        <div class="card item5">
            <div class="btn" 
            :class="item.isChecked?'btnBright':''"
            v-for="item in storeServiceList" :key="item.id"
            @click="item.isChecked=!item.isChecked">
                {{item.text}}
            </div>
        </div>

        <div class="card item5">
            <div class="btn" 
            :class="invoiceIsChecked?'btnBright':''"
            @click="invoiceIsChecked=!invoiceIsChecked"
            >
                提供纸质发票
            </div>
            <div
            class="btn" 
            :class="invoice2IsChecked?'btnBright':''"
            @click="invoice2IsChecked=!invoice2IsChecked"
            >
                提供电子发票
            </div>
        </div>


        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" @click="toAllActivity">提交</van-button>
        </div>

    </div>
</template>
<script>
    import {editGroupAxios} from '@/https/group'
    import HeaderView from '@/components/header1View.vue';
    export default{
        data() {
            return {
                goodImg: '',       //图片直接写死
                chineseName:'',   //1
                englishName:'',   //2
                goodPrice:'',     //3 套餐价格
                goodPackage:'' , //4 套餐细节(对象)
                validityTime:'',  //5有效期
                startToEndDate:'' ,//6活动日期
                unUseDate:'',      //7不可用日期
                useTime:'',        //8可用时间
                limitNum:'',       //9限制数量
                storeNum:'',      //10库存数量
                rules:'',         //11使用规则
                clikedStoreServiceList:'',  //12选择的服务(数组)      
                invoiceIsChecked:false, //13发票1是否点击
                invoice2IsChecked:false,  //14发票2是否点击
                storeServiceList:[
                    {
                        id:1,
                        text:'免预约',
                        isChecked:false
                    },
                    {
                        id: 2,
                        text:'要预约',
                        isChecked:false
                    },
                    {
                        id: 3,
                        text:'包间可用',
                        isChecked:false
                    },
                    {
                        id: 4,
                        text:'包间除外',
                        isChecked:false
                    },
                    {
                        id: 5,
                        text:'免费wifi',
                        isChecked:false
                    },
                    {
                        id: 6,
                        text:'免费停车',
                        isChecked:false
                    },
                    {
                        id: 7,
                        text:'推荐自提',
                        isChecked:false
                    },
                    {
                        id: 8,
                        text:'无烟区',
                        isChecked:false
                    }
                ],
                read_radio:'',

                addObj:{
                    groupId:111111,
                    chineseName:this.chineseName,  //1
                    englishName:this.englishName,   //2
                    groupBuyPrice:this.goodPrice,     //3 套餐价格
                    goodsDetail:this.goodPackage , //4 套餐内容   (复杂对象)
                    activityTime:this.validityTime,  //5有效期
                    indate: this.startToEndDate,//6活动日期 起止
                    // useTime:'',        //8可用时间 周几
                    // limitNum:'',       //9限制数量
                    // storeNum:'',      //10库存数量
                    goodsRules:this.rules,         //11使用规则
                }
            };
        },
        methods:{
            onSubmit(values) {
                console.log('submit', values);
            },
            toAddGoodImg(){
                this.$router.push('./AddImg')
            },
            toAddGoodsName(){
                this.$router.push('./AddGoodsName')
            },
            tostartToEndDate(){
                this.$router.push('./StartToEndDate')
            },
            toUnUseDate(){
                this.$router.push('./UnUseDate')
            },
            toUseDate(){
                this.$router.push('./UseDate')
            },
            toUseRules(){
                this.$router.push('./UseRules')
            },
            toAllActivity(){
                
                // 发请求
                editGroupAxios(this.addObj)
                .then(
                    res=>{
                        console.log(res)
                    }
                )
                .catch(
                    err=>{
                        console.log(err)
                    }
                )

                //跳转路由
                this.$router.push({
                    path:'./GroupBuy',
                    query:{
                        addObj:this.addObj
                    }
                })

            }
        },
        components:{
            HeaderView
        }
    }
</script>

<style scoped>
    .box{
        background: #f5f5f5;
    }
    .header_box_main{
        background: #ff6e53;
        width: 100px;
        text-align: center;
        margin:0 auto;
    }
    .card{
        padding:20px;
        margin-top: 10px;
        background: white;
        font-size: 16px;
    }
    .sp1{
        font-size: 12px;
        color: #9999a6;
    }
    p{
        font-size: 16px;
        padding:0;
        margin:0;
    }
    .item1{
        height: 40px;
    }
    .item5{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
   .btn{
        width: 150px;
        height: 50px;
        background: #f5f5f5;
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
   }
   .btnBright{
        background: #ffeeee;
        outline: 1px solid #ff6e53;
        color: #ff6e53;
    }

</style>